<template>
	<view class="ys">
		<y-header :username="username"></y-header>
		<view class="userbody">
			<y-bread :name="pageName"></y-bread>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right" v-if="info != ''">
					<view class="levelbox">
						<view class="levelcard">
							<view class="userinfo">
								<view class="welcome">
									{{$t('index.nh')}}，{{info.user.username}}{{$t('index.hygl')}}
								</view>
								<view class="userlevel">
									<text class="level">{{info.user.level_name}}</text>
								</view>
								<view class="leveltiem">
									{{$t('index.yjyx')}}
								</view>
							</view>
							<view class="levelimg" @click="changeHeader">
								<image :src="head_url || '/static/img/vip.jpg'" mode="widthFix"></image>
							</view>
						</view>
						<view class="paylevel">
							<view class="pay-l-top">
								<text>{{$t('index.ljxf')}}</text>
								<text class="pay-l-num">${{order_sum}}</text>
							</view>
							<view class="pay-l-time">
								{{$t('index.yjyx')}} | {{$t('index.gxrq')}} {{info.user.update_time}}
							</view>
						</view>
						<view class="leveltips">
							{{$t('index.code')}}：{{info.user.recommend_code}}
							<image @click="copy" src="/static/icon/fz.svg" mode="widthFix"></image>
						</view>
					</view>
					<view class="orderbox">
						<view class="orderitem">
							<text class="orderitem-num">{{info.order.delivery}}</text>
							<text>{{$t('index.dch')}}</text>
						</view>
						<view class="orderitem">
							<text class="orderitem-num">{{info.order.received}}</text>
							<text>{{$t('index.ych')}}</text>
						</view>
						<view class="orderitem">
							<text class="orderitem-num">{{info.order.pickup}}</text>
							<text>{{$t('index.dqh')}}</text>
						</view>
						<view class="orderitem">
							<button @click="toPage('/pages/user/orderlist')">{{$t('index.ckdd')}}</button>
						</view>
					</view>
					<view class="orderbox">
						<view class="orderitem" @click="saveImg">
							<uni-icons class="icon-item" :size="26" type="scan"></uni-icons>
							<text>{{$t('index.code')}}</text>
						</view>
						<view class="orderitem" @click="toPage('/pages/user/info')">
							<uni-icons class="icon-item" :size="26" type="contact"></uni-icons>
							<text>{{$t('index.hyjbzl')}}</text>
						</view>
						<view class="orderitem" @click="toPage('/pages/user/salelist')">
							<uni-icons class="icon-item" :size="26" type="heart"></uni-icons>
							<text>{{$t('index.wdsc')}}</text>
						</view>
						<view class="orderitem" @click="toPage('/pages/user/addresslist')">
							<uni-icons class="icon-item" :size="26" type="location"></uni-icons>
							<text>{{$t('index.cysjr')}}</text>
						</view>
					</view>
					<view class="orderbox">
						<view class="orderitem" @click="toPage('/pages/finance/recharge')">
							<uni-icons class="icon-item" :size="26" type="wallet"></uni-icons>
							<text>{{$t('index.cz')}}</text>
						</view>
						<view class="orderitem" @click="toPage('/pages/finance/withdraw')">
							<uni-icons class="icon-item" :size="26" type="wallet-filled"></uni-icons>
							<text>{{$t('index.tx')}}</text>
						</view>
						<view class="orderitem" @click="toPage('/pages/finance/transfer')">
							<uni-icons class="icon-item" :size="26" type="wallet-filled"></uni-icons>
							<text>{{$t('index.hz')}}</text>
						</view>
					</view>
					<view class="paybox orderbox">
						<view class="title">
							{{$t('index.wdds')}}
						</view>
						<view class="paynum" @click="toPage('/pages/user/point')">
							{{info.user.balance_1}} {{$t('index.point')}}
							<uni-icons type="right" :size="15" color="#ff5353"></uni-icons>
						</view>
					</view>
					<view class="usernum">
						{{$t('index.xshybb')}}：{{info.user.user_no || $t('index.zw')}}
					</view>
					<view class="min-menu">
						<y-usermenu></y-usermenu>
					</view>
					<view class="codebox">
						<view class="hidebox">
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="codeurl" :options="{ margin: 10 }">
							</uqrcode>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getData
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.hyzq'),
				info: [],
				codeurl: '',
				show_code: false,
				username: '',
				head_url: '',
				order_sum: 0
			}
		},
		onReady() {
			this.getData()
		},
		onLoad() {},
		methods: {
			changeHeader() {
				var that = this
				let type = ''
				if (this.head_url && this.head_url == '') {
					type = 1
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'], //从相册选择
					count: 1,
					success: (res) => {
						let igmFile = res.tempFilePaths;
						uni.showLoading({
							mask: true,
							title: this.$t('index.jzs')
						})
						for (let i = 0; i < igmFile.length; i++) {
							uni.uploadFile({
								url: that.$config.requestUrl + '/common/upload',
								header: {
									'jun-token': uni.getStorageSync('jun-token')
								},
								formData: {
									accept: 'image',
									head_url: type
								},
								filePath: igmFile[i],
								name: 'UploadFile',
								success: (res) => {
									uni.hideLoading()
									let imgUrls = JSON.parse(res.data); //微信和头条支持
									if (imgUrls.code != 0) {
										uni.$showMsg(imgUrls.msg)
									} else {
										let path = imgUrls.data.path
										that.head_url = path
										that.head_pic = imgUrls.data.id
									}

								},
								fail(err) {
									uni.hideLoading()
								}
							})
						}
					},
				});
			},
			copy() {
				var that = this
				uni.setClipboardData({
					data: that.$config.websiteUrl + '#/pages/login/register?code=' + that.info.user
						.recommend_code
				})
			},
			saveImg() {
				this.show_code = true
				this.$refs.uqrcode.save({
					success: () => {

					}
				});
			},
			showCode() {

			},
			getData() {
				var that = this
				getData().then(res => {
					that.info = res.data
					that.order_sum = res.data.orderSum
					that.head_url = that.info.user.path
					that.username = that.info.user.username
					that.codeurl = that.$config.websiteUrl + '#/pages/login/register?code=' + that.info.user
						.recommend_code
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.codebox {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 0;
		height: 0;
	}

	.min-menu {
		display: none;
		margin-top: 20px;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	}

	.usernum {
		color: #666666;
		font-size: 14px;
		margin-top: 12px;
	}

	.orderbox {
		display: flex;
		padding: 18px 20px;
		box-sizing: border-box;
		border: 1px solid #dddddd;
		border-radius: 4px;
		margin-top: 20px;

		.orderitem {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 14px;

			.orderitem-num {
				margin-bottom: 3px;
				font-weight: bold;
				font-size: 16px;
			}

			.icon-item {
				margin-bottom: 3px;
			}

			button {
				width: 100%;
				background-color: #ff5353;
				color: #fff;
				font-size: 14px;
				box-sizing: border-box;
				height: 40px;
				line-height: 40px;
			}
		}
	}

	.paybox {
		flex-direction: column;
		color: #333333;
		font-size: 14px;
		font-weight: 500;

		.paynum {
			font-weight: bold;
			color: #ff5353;
			font-size: 14px;
			margin-top: 5px;
			display: flex;
			align-items: center;
			cursor: pointer;

			text {
				margin-left: 5px;
			}
		}
	}

	.levelbox {
		border: 1px solid #dddddd;
		border-radius: 4px;
		padding: 0px 20px;

		.levelcard {
			padding: 20px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.userinfo {}

			.welcome {}

			.userlevel {
				margin: 20px 0;
			}

			.level {
				margin-right: 8px;
				border-radius: 2px;
				padding: 8px;
				background-color: #d8d8d8;
				color: #333333;
				font-size: 14px;
			}

			.leveltiem {
				color: #999999;
				font-size: 12px;
			}

			.levelimg {
				width: 70%;
				text-align: right;

				image {
					width: 40%;
					max-width: 300px;
					min-width: 150px;
				}
			}
		}


		.paylevel {

			.pay-l-top {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				margin-bottom: 10px;

				.pay-l-num {
					font-size: 14px;
					font-weight: bold;
				}
			}

			.pay-l-time {
				width: 100%;
				flex-shrink: 0;
				color: #999999;
				font-size: 11px;
				margin-bottom: 10px;
			}
		}



		.leveltips {
			font-size: 12px;
			padding-bottom: 20px;
			display: flex;
			align-items: center;

			image {
				width: 18px;
				margin-left: 10px;
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.min-menu {
					display: block;
				}
			}
		}

		.orderbox {
			padding: 18px 10px;
			white-space: nowrap;
		}

		.orderbox .orderitem button {
			font-size: 12px;
		}
	}
</style>